<template>
  <div class="tabsContainer">
    <div class="tabs" ref="tabBox">
      <el-tag
        :key="tag.name"
        size="small"
        :closable="tag.name === 'home' ? false : true"
        :id="tag.name == 'home' ? 'home' : ''"
        v-for="tag in tags"
        :disable-transitions="false"
        @close="handleClose(tag, $route.name === tag.name)"
        @click="changeMenu(tag)"
        @contextmenu.native.prevent="onContextmenu($event,tag,$route.name===tag.name)"
        :effect="($route.name === tag.name) ? 'dark' : 'plain'"
        :class=" ($route.name === tag.name) ? 'active' : ''"
        >
        {{tag.label}}
        </el-tag
      >
      <!-- <el-tag type="warning">很长.....999999999999999999999999</el-tag>
      <el-tag type="warning">很长....999999999999999999999999.</el-tag>
      <el-tag type="warning">很长..999999999999999999999999...</el-tag>
      <el-tag type="warning">很长.999999999999999999999999....</el-tag>
      <el-tag type="warning">很长.999999999999999999999999....</el-tag> -->
      <!-- <el-tag type="warning">哈哈哈</el-tag>
       <el-tag type="warning">{{$route.name}}</el-tag>
       <el-tag type="warning">{{tag.name}}</el-tag> -->

      
    </div>
    <!-- 左右滑动按钮 -->
    <el-tag
      class="leftTip scrollButton"
      @mousedown.native="leftScroll"
      @mouseup.native="stopScroll"
      v-show="needScorll"
    >
      <i class="el-icon-d-arrow-left"></i>
    </el-tag>
    <el-tag
      class="rightTip scrollButton"
      @mousedown.native="rightScroll"
      @mouseup.native="stopScroll"
      v-show="needScorll"
    >
      <i class="el-icon-d-arrow-right"></i>
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      leftTimer: () => {},
      rightTimer: () => {},
      // 需要左滑动
      needScorll: false
    };
  },
  computed: {
    ...mapState({ tags: state => state.tab.tabsList })
  },
  watch: {
    // tab长度发生变化，获取宽度，判断滑动按钮是否显示
    tags() {
      this.$nextTick(() => {
        if (this.$refs.tabBox.scrollWidth > this.$refs.tabBox.offsetWidth) {
          this.needScorll = true;
        } else {
          this.needScorll = false;
        }
      });
    }
  },
  created() {
    this.$store.commit("getTableList");
    
  },
  methods: {
    ...mapMutations({
      close: "closeTab"
    }),
    // 点x 关闭
    handleClose(tag, current) {
      let n = this.tags.findIndex(item => item.name === tag.name);
      this.close(tag);
      // 关闭当前页面时，判断关闭后是否可跳转到相邻tab页
      if (current) {
        if (this.tags[n - 1]) {
          this.changeMenu(this.tags[n - 1]);
          // 下一个代替了原来的位置
        } else if (this.tags[n]) {
          this.changeMenu(this.tags[n]);
        } else {
          this.$router.push({ path: "404" });
          return;
        }
      }
    },
    // 关闭其他
    closeOthers(tag,current){
      // let n = this.tags.findIndex(item=>item.name===tag.name)
      // 先关闭再跳转 
      let row = {...tag}
      this.$store.commit('closeAllTab');
      this.changeMenu(row)
    },
    // tabs右键菜单
     onContextmenu(event,tag,isCurrent) {
    console.log(this.$route,'this.$route')
    console.log(tag,'this.tag111111')
      console.log(event)
      this.$contextmenu({
        items: [
          {
            label: "关闭",
            onClick: () => {
              console.log("关闭");
              this.handleClose(tag,isCurrent)
            },
          },
          {
            label: "关闭全部",
            onClick: () => {
              console.log("关闭全部");
              this.$store.commit('closeAllTab')
              this.$router.push({name:"home"})
            },
          },
          {
            label: "关闭其他",
            onClick: () => {
              console.log("关闭其他");
              this.closeOthers(tag,isCurrent)
            },
          },
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "tabs",
        zIndex: 3,
        // minWidth: 100
      });
      return false;
    },
    changeMenu(item) {
      let str = item.name.split('?')[1]
      this.$router.push({ name: item.name,params:{str: item.name.split('?')[1]} });
      this.$store.commit("selectMenu", item);
    },
    leftScroll() {
      this.leftTimer = setInterval(() => {
        this.$refs.tabBox.scrollLeft -= 10;
      }, 10);
    },
    rightScroll() {
      if (this.$refs.tabBox.scrollLeft >= this.$refs.tabBox.scrollWidth)
        return false;
      this.rightTimer = setInterval(() => {
        this.$refs.tabBox.scrollLeft += 10;
        console.log("执行位移");
      }, 10);
    },
    stopScroll() {
      clearInterval(this.leftTimer);
      clearInterval(this.rightTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.tabsContainer {
  position: relative;
  width: 100%;
  background-color: #f1f1f2;
  .leftTip {
    position: absolute;
    top: 10px;
    right: 0%;
    transform: translate(-50px);
  }
  .rightTip {
    position: absolute;
    top: 10px;
    right: 0%;
    transform: translate(-10px);
  }
}
.tabs {
  transition: all 0.3s;
  width: 92%;
  height: 50px;
  padding: 15px 10px 0px 10px;
  background: #f1f1f2;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;

  .el-tag {
    // width: 96px;
    transition: all 0.3s;

    display: inline-block;
    padding: 0 10px 0 20px;
    height: 32px;
    background: #f9f9f9;
    text-align: center;
    font-size: 12px;
    box-shadow: 0px 1px 2px 0px #d5d7dc;
    border-radius: 4px;
    border: 1px solid #ffffff;
    margin-right: 6px;
    cursor: pointer;
    line-height: 32px;
    font-weight: 400;
    color: rgba(83, 95, 116, 0.85);
    font-family: PingFangSC-Regular, PingFang SC;
  }
  /deep/.el-tag--plain .el-tag__close {
    color: #41556c;
    float: right;
  }
  /deep/.el-tag--dark .el-tag__close {
    color: #41556c;
    /* float: right; */
    position: absolute;
    right: 2px;
  }
  .el-tag.active {
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0px 0px 14px 0px #eaeaee, 0px -3px 1px 0px #9aa8ca;
    font-weight: 500;
    color: #415073;
    position: relative;
  }
  // tab底部与main顶部相连
  .el-tag.active::after {
    content: "";
    position: absolute;
    width: 102%;
    height: 8px;
    background-color: #fff;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
  }
}
.scrollButton {
  width: 35px;
  height: 32px;
  margin-top: 5px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px #e4e8eb;
  text-align: center;
  transition: all 0.3;
  color: rgba(83, 95, 116, 0.85);
  vertical-align: middle;
  line-height: 35px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

#home {
  padding: 0 20px;
}
</style>
